<template>
  <div 
    ref="dropdownRef" 
    class="md-dropdown" 
    v-click-outside="close"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <div class="md-dropdown__trigger" @click="toggle">
      <slot name="trigger"></slot>
    </div>
    <transition name="md-dropdown">
      <div v-show="visible" class="md-dropdown__menu">
        <slot></slot>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, onMounted, onBeforeUnmount } from 'vue';

interface Props {
  placement?: 'top' | 'bottom' | 'left' | 'right';
  trigger?: 'click' | 'hover';
}

const props = withDefaults(defineProps<Props>(), {
  placement: 'bottom',
  trigger: 'click'
});

const emit = defineEmits<{
  (e: 'visible-change', visible: boolean): void;
}>();

const visible = ref(false);

const toggle = () => {
  visible.value = !visible.value;
  emit('visible-change', visible.value);
};

const open = () => {
  if (!visible.value) {
    visible.value = true;
    emit('visible-change', true);
  }
};

const close = () => {
  if (visible.value) {
    visible.value = false;
    emit('visible-change', false);
  }
};

// 点击外部关闭下拉菜单
const vClickOutside = {
  mounted(el: HTMLElement, binding: any) {
    el._clickOutside = (event: MouseEvent) => {
      if (!(el === event.target || el.contains(event.target as Node))) {
        binding.value(event);
      }
    };
    document.addEventListener('click', el._clickOutside);
  },
  unmounted(el: HTMLElement) {
    document.removeEventListener('click', el._clickOutside);
  }
};

// 悬停触发
let hoverTimer: ReturnType<typeof setTimeout> | null = null;
const dropdownRef = ref<HTMLElement | null>(null);

const handleMouseEnter = () => {
  if (props.trigger === 'hover') {
    if (hoverTimer) clearTimeout(hoverTimer);
    open();
  }
};

const handleMouseLeave = () => {
  if (props.trigger === 'hover') {
    hoverTimer = setTimeout(() => {
      close();
    }, 200);
  }
};

onBeforeUnmount(() => {
  if (hoverTimer) {
    clearTimeout(hoverTimer);
  }
});
</script>

<style lang="scss" scoped>
.md-dropdown {
  position: relative;
  display: inline-block;
  
  &__trigger {
    cursor: pointer;
  }
  
  &__menu {
    position: absolute;
    z-index: 1000;
    min-width: 120px;
    padding: 8px 0;
    margin: 4px 0;
    background-color: var(--md-backgroundColor, #ffffff);
    border: 1px solid var(--md-borderColor, #e0e0e0);
    border-radius: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    
    &[placement="top"] {
      bottom: 100%;
      left: 0;
    }
    
    &[placement="bottom"] {
      top: 100%;
      left: 0;
    }
    
    &[placement="left"] {
      right: 100%;
      top: 0;
    }
    
    &[placement="right"] {
      left: 100%;
      top: 0;
    }
  }
}

.md-dropdown-enter-active,
.md-dropdown-leave-active {
  transition: opacity 0.3s, transform 0.3s;
}

.md-dropdown-enter-from,
.md-dropdown-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>